import {Bezier} from './bezier';
import {Draw} from './Draw';
import {Control} from './control';

class Main {
	constructor(options){
		this.options = Object.assign({
			width: window.innerWidth,
			height: 600,
			originX: 10,
			originY: 10,
			radius: 6
		}, options);
		let draw, ctrl, bzr;
		//实例化绘图对象
		draw = new Draw('canvas-container', this.options);
		//实例化控制操作对象
		ctrl = new Control('canvas-container', this.options);

		//用于绘制静态部分：如Bezier控制点及其连线和Bezier曲线
		function drawBg(points){
			draw.bgOn();
			draw.clear();
			draw.axis();
			draw.grid();
			draw.bezierN(points, 'red');
			draw.pline(points, 'blue');
			draw.circle(points, '', '', 'blue');
			draw.bgOff();
			// draw.bg();
		}
		
		let ball = document.getElementById('ball');//用来表现DOM动画的小球
		let btns = document.querySelectorAll('.btn'); //控制播放、暂停等的按钮
		let inputs = document.querySelectorAll('input'); //参数面板的input，通过它修改参数
		let bezierN = document.getElementById('bezier-points'); //标题：显示当前bezier点参数

		//实例化Bezier对象
		bzr = new Bezier({
			name: 'ease', //linear, ease-in, ease-out, ease-in-out
			// name: [0, 0, 1, 0, 1, 1],
			// name: [0, 0, 1, 0, 0, 1, 1, 1],
			// name: [0,0, .1, 1, .2, 0, .3, .5, .4, 0, .5, 1, .6, .4, .7,1, .8,0, 1, 1],
			duration: 2000,
			zoom: 500,
			forward: true,
			count: 0,
			autoplay: true,
			// delay: 1000,
			onready: function(){
				ctrl.init(this.points);
				drawBg(this.points);
			},
			beforeUpdate: function(){
				draw.clear();
			},
			update: function(arr){
				ball.style.transform = 'translate('+ (this.zoom * this.rate) + 'px)';
				draw.bezierN(bzr.points, 'red');
				draw.pline(bzr.points, 'blue');
				draw.axis();
				// draw.bg();
			},
			process: function(arr){
				draw.circle(arr, 4, '#b00')
				draw.pline(arr, 'green');
			},
			ended: function(){
				draw.clear();
				draw.bg();
			}
		});
		console.log(bzr)

		//当移动控制点时，重绘静态部分
		ctrl.onPointMove = function(index1, index2, left, top){
			bzr.points[index1] = draw.x(left);
			bzr.points[index2] = draw.y(top);
			draw.clear()
			draw.bezierN(bzr.points, 'red');
			draw.pline(bzr.points, 'blue');
			draw.axis();
			// drawBg(bzr.points);
			bezierN.innerText = getPoints();
		}
		ctrl.onadd = function(){

		}
		ctrl.onremove = function(index){
			console.log(index);
			bzr.points.splice(index, 2);
			drawBg(bzr.points);
		}
		ctrl.onclear = function(){
			bzr.points.splice(0, bzr.points.length);
			drawBg(bzr.points);
		}

		//按钮事件
		btns.forEach(function (btn){
			btn.onclick = btnFn;
		});
		function btnFn(){
			switch(this.name){
				case 'play':
					bzr.start();
					break;
				case 'pause':
					bzr.pause();
					break;
				case 'stop':
					bzr.stop();
					break;
				case 'destroy':
					bzr.destroy();
			}
		}
		//初始化input参数，绑定改变参数事件
		function getPoints(){
			return bzr.points.map(function(item){
				return item / bzr.zoom;
			});
		}
		inputs.forEach(function(input){
			input.value = bzr[input.name];
			bezierN.innerText = getPoints();
			input.onchange = inputFn;
		});
		function inputFn(){
			let val = this.value.trim();
			switch(this.name){
				case 'name':
					if(/^ease(-(in|out|in-out))?|linear$/.test(val)){
						bzr.name = val;
						bzr.compute();
						drawBg(bzr.points);
						bezierN.innerText = getPoints();
						ctrl.init(bzr.points);
					}else if(/^(\-?(\.?[0-9]+|[0-9]+\.[0-9]+),){5,}/.test(val)){
						let arr = val.split(',');
						bzr.name = arr.map(function(item){
							return parseFloat(item.trim()) || 0;
						});
						bzr.compute();
						drawBg(bzr.points);
						bezierN.innerText = getPoints();
						ctrl.init(bzr.points);
					}
					break;
				case 'duration':
					bzr.duration = parseInt(val);
				break;
				case 'zoom':
					bzr.zoom = parseInt(val);
					bzr.compute();
					drawBg(bzr.points);
					ctrl.init(bzr.points);
				break;
				case 'forward':
					bzr.forward = val === 'true';
					break;
				case 'count':
					bzr.count = parseInt(val);
					break;
				case 'autoplay':
					bzr.autoplay = val === 'true';
					break;
				case 'delay':
					bzr.delay = parseInt(val);
					break;
			}
		}
		this.getXY(draw.canvas.parentNode);
	}
	getXY(el){
		let _this = this;
		let worldSpace = document.getElementById('world-space');
		let localSpace = document.getElementById('local-space');
		let rectInfo = el.getBoundingClientRect();
		el.addEventListener('mousemove', function(e){
			worldSpace.innerText = 'X:' + e.clientX + '   Y:' + e.clientY;
			localSpace.innerText = 'X:' + (e.clientX - _this.options.originX) + ' Y:' + Math.round(_this.options.height - _this.options.originY - (e.clientY - rectInfo.top));
		});
	}
}

new Main();